<template>
  <div class="login-background">
    <div class="login-container">
      <div class="login-card">
        <div class="login-header">
          <img src="@/assets/logo-full.png" alt="" height="60px" />
          <h3 style="margin-top: 10px">MEM 创新实践考核机制平台</h3>
        </div>
        <LoginForm ref="loginRef"></LoginForm>

        <div class="demo">
          <span>导师角色：用户名: 0579335500</span><br />
          <span>组长角色：用户名: ZF2408C58 </span><br />
          <span>组员角色：用户名: ZF2408C10 </span>
          
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import LoginForm from "./components/LoginForm.vue";
</script>
<style lang="scss" scope>
.login-background {
  background: url("@/assets/login-bg.jpg") no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  .login-container {
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    .login-card {
      padding: 40px;
      width: 350px;
      position: relative;
      border-radius: 8px;
      // border: 1px solid rgba(255, 255, 255, 0.7);
      &:after {
        background-color: rgba(255, 255, 255, 0.7);
        width: 100%;
        height: 100%;
        border-radius: 7px;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        z-index: -1;
      }
    }
  }

  @media only screen and (max-width: 768px) {
    .login-container {
      right: auto;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .login-header {
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--el-color-primary);
  }
}

.demo {
  color: #f24949;
  margin-top: 20px;
}
</style>
